<template>
    <div class="container">
        <div class="top-content">
            <div class="left-content">
                当前第
                <span class="tip-text">{{currentIndex+1}}</span> 道题。未答题目：
                <span class="tip-text">{{dataList.length - currentIndex-1}}</span> 道，总题目：
                <span class="tip-text">{{dataList.length}}</span> 道。
            </div>
            <div class="right-content">
                测试剩余时间：
                <span class="tip-text">{{SecondToDate}}</span>
            </div>
            <div class="right-content">
                <el-button type="danger" v-if="!isEndFlag" round @click="leaveTap">结束测试</el-button>
            </div>
        </div>
        <div class="detail-content" v-if="!isEndFlag">
            <div class="item-content">
        <span class="label">
          题目
          (
          <span>{{ruleForm.examquestionValue}}</span>
          )
          ({{ruleForm.examquestionScore}}分)：
        </span>
                <span class="content">{{ruleForm.examquestionName}}</span>
            </div>
            <div
                    v-if="(ruleForm.examquestionTypes==1||ruleForm.examquestionTypes==3)&&!isSubmitFlag"
                    class="item-content"
                    style="border-top:1px solid #eeeeee"
            >
                <span class="label">选择答案：</span>
                <span class="content">
          <el-select v-model="answer">
            <el-option
                    :label="item.text"
                    :value="item.code"
                    v-for="(item,index) in options"
                    v-bind:key="index"
            ></el-option>
          </el-select>
        </span>
            </div>
            <div
                    v-if="ruleForm.examquestionTypes==4&&!isSubmitFlag"
                    class="item-content"
                    style="border-top:1px solid #eeeeee"
            >
                <span class="label">填写答案：</span>
                <span class="content">
          <el-input v-model="answer" style="width:300px" placeholder="填写答案" clearable></el-input>
        </span>
            </div>
            <div
                    v-if="ruleForm.examquestionTypes==2&&!isSubmitFlag"
                    class="item-content"
                    style="border-top:1px solid #eeeeee"
            >
                <span class="label">选择答案：</span>
                <span class="content">
          <el-select v-model="answer" multiple>
            <el-option
                    :label="item.text"
                    :value="item.code"
                    v-for="(item,index) in options"
                    v-bind:key="index"
            ></el-option>
          </el-select>
        </span>
            </div>
            <div v-if="isSubmitFlag" class="item-content" style="border-top:1px solid #eeeeee">
                <span class="label">填写答案：</span>
                <span class="content">{{answer}}</span>
            </div>
            <div v-if="isSubmitFlag" class="item-content" style="color:#888888">
        <span
                class="label"
                style="color:red;margin-right:20px"
        >{{answer==this.ruleForm.examquestionAnswer?'正确':'错误'}}</span>
                <span class="label">解析：</span>
                <span class="content">{{ruleForm.examquestionAnalysis}}</span>
            </div>
            <div class="item-content" style="color:#888888">
                <el-button v-if="!isSubmitFlag" @click="submitTap" type="primary">提交答案</el-button>
                <el-button v-if="isSubmitFlag" @click="nextTap" type="success">下一题</el-button>
            </div>
        </div>
        <div class="detail-content" v-if="isEndFlag">
            <div class="item-content">
        <span class="label">
          测试成绩：
          <span style="font-size:24px;font-weight:blod;color:red">{{this.score}}</span>
        </span>
                <span class="content">分</span>
            </div>
            <div class="item-content" style="color:#888888">
                <el-button @click="finishTap" type="primary">结束测试</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dataList: [],
                // 当前题目
                paper: {},
                // 当前答题下标
                currentIndex: 0,
                ruleForm: {},
                // 倒计时定时器
                inter: null,
                // 倒计时时间
                count: 0,
                // 选项
                options: null,
                // 用户选择答案
                answer: "",
                // 是否提交点击下一题
                isSubmitFlag: false,
                // 得分
                score: 0,
                user: {},
                // 测试是否结束
                isEndFlag: false
            };
        },
        computed: {
            SecondToDate: function() {
                var time = this.count;
                if (null != time && "" != time) {
                    if (time > 60 && time < 60 * 60) {
                        time =
                                parseInt(time / 60.0) +
                                "分钟" +
                                parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) +
                                "秒";
                    } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
                        time =
                                parseInt(time / 3600.0) +
                                "小时" +
                                parseInt(
                                        (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                ) +
                                "分钟" +
                                parseInt(
                                        (parseFloat(
                                                (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                                ) -
                                                parseInt(
                                                        (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                                )) *
                                        60
                                ) +
                                "秒";
                    } else if (time >= 60 * 60 * 24) {
                        time =
                                parseInt(time / 3600.0 / 24) +
                                "天" +
                                parseInt(
                                        (parseFloat(time / 3600.0 / 24) - parseInt(time / 3600.0 / 24)) *
                                        24
                                ) +
                                "小时" +
                                parseInt(
                                        (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                ) +
                                "分钟" +
                                parseInt(
                                        (parseFloat(
                                                (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                                ) -
                                                parseInt(
                                                        (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
                                                )) *
                                        60
                                ) +
                                "秒";
                    } else {
                        time = parseInt(time) + "秒";
                    }
                }
                return time;
            }
        },
        destroyed: function() {
            window.clearInterval(this.inter);
        },
        mounted() {
            this.$http({
                url: `${this.$storage.get("sessionTable")}/session`,
                method: "get"
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.user = data.data;
                } else {
                    this.$message.error(data.msg);
                }
            });
            // 获取 试题
            var params = {
                page: 1,
                limit: 999,
                orderBy: "examquestion_sequence",
                exampaperId: this.$route.params.id
            };
            this.$http({
                url: 'examquestion/page',
                method: "get",
                params: params
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataList = data.data.list;
                    this.ruleForm = this.dataList[this.currentIndex];
                    this.options = JSON.parse(this.ruleForm.examquestionOptions);
                } else {
                    this.dataList = [];
                }
                this.dataListLoading = false;
            });
            // 获取测卷
            this.$http({
                url: `exampaper/info/${this.$route.params.id}`,
                method: "get"
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.paper = data.data;
                    if (this.paper.exampaperDate) {
                        this.count = this.paper.exampaperDate*60;
                        if (this.count > 0) {
                            var _this = this;
                            this.inter = window.setInterval(function() {
                                _this.count = _this.count - 1;
                                if (_this.count < 0) {
                                    window.clearInterval(_this.inter);
                                    _this.isEndFlag = true;
                                }
                            }, 1000);
                        }
                    }
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
        methods: {
            leaveTap() {
                this.$confirm(`确定离开测试?未答题目按0分计算`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.isEndFlag = true;
                });


                let record = {
                    exampaperId: this.$route.params.id,
                    examredetailsUuidNumber: this.$route.params.paperUUID,
                };
                this.$http({
                    url: `examredetails/addUnsaved`,
                    method: "get",
                    params: record
                }).then(({ data }) => {
                });
            },
            finishTap() {
                this.$router.go(-1);
            },
            submitTap() {
                let myscore = 0;
                if (this.ruleForm.examquestionTypes == 2) {
                    this.answer = this.answer.join(",");
                }
                this.isSubmitFlag = true;
                let defen = 0
                if (this.answer == this.ruleForm.examquestionAnswer) {
                    this.score = Number(this.score) +Number(this.ruleForm.examquestionScore) ;
                    myscore = this.ruleForm.examquestionScore;
                    defen = this.ruleForm.examquestionScore;
                }
                // 保存答题记录
                let record = {
                    examredetailsUuidNumber: this.$route.params.paperUUID,
                    examquestionId: this.ruleForm.id,
                    examquestionName: this.ruleForm.examquestionName,
                    examredetailsMyscore: defen,
                    examredetailsMyanswer: this.answer,
                    yonghuId: this.user.id,
                };
                this.$http({
                    url: `examredetails/saveExamredetails?examrecordId=`+this.$route.params.examrecordId,
                    method: "post",
                    data: record
                }).then(({ data }) => {
                });
            },
            nextTap() {
                if (this.currentIndex == this.dataList.length - 1) {
                    this.isEndFlag = true;
                } else {
                    this.currentIndex = this.currentIndex + 1;
                    this.ruleForm = this.dataList[this.currentIndex];
                    this.options = JSON.parse(this.ruleForm.examquestionOptions);
                    this.isSubmitFlag = false;
                }
                this.answer = null
            }
        }
    };
</script>
<style lang="scss" scoped>
    .container {
        border: 1px solid #eeeeee;
    }
    .tip-text {
        font-size: 24px;
        color: #f96332;
    }
    .top-content {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 18px;
        background: #409eff;
        color: #ffffff;
        border-radius: 20px;
    }
    .detail-content {
        padding: 20px;
        color: #333333;
    .item-content {
        padding: 20px;
    }
    }
</style>
